import React from 'react'
import { Card, Form, Input, Button, Table, Tooltip,Pagination } from 'antd'

import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

import './index.less'
import type { ColumnsType } from 'antd/lib/table';
interface DataType {
    key: string;
    name: string;
    money: string;
    address: string;
}
const columns: ColumnsType<DataType> = [
    {
        title: '序号',
        dataIndex: 'name',
        // render: (text:string) => <a>{text}</a>,
        render: (row, record, index) => index + 1,
        width: 50,
        align: 'center',
    },
    {
        title: '医院名称',
        className: 'column-money',//给当前列添加类名
        dataIndex: 'money',
        align: 'right',  //布局方式  靠右
    },
    {
        title: '医院编号',
        dataIndex: 'address',
    },
    {
        title: 'api基础路径',
        dataIndex: 'address',
    },
    {
        title: '签名',
        dataIndex: 'address',
    },
    {
        title: '联系人姓名',
        dataIndex: 'address',
    },
    {
        title: '联系人手机',
        dataIndex: 'address',
    },
    {
        title: '操作',
        // dataIndex: 'address',
        fixed: 'right',
        width: 110,
        render: () => {
            return (
                <>
                    <Tooltip placement="top" title={'添加医院'}>
                        <Button type='primary' icon={<EditOutlined />} />
                    </Tooltip>
                    <Tooltip placement="top" title={'删除医院'}>
                        <Button type='primary' danger icon={<DeleteOutlined />} className="ml" />
                    </Tooltip>
                </>
            )
        }
    },
];
const data = [
    {
        key: '1',
        name: 'John Brown',
        money: '￥300,000.00',
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        money: '￥1,256,000.00',
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        money: '￥120,000.00',
        address: 'Sidney No. 1 Lake Park',
    },
];

export default function HospitalSet() {
    return (
        <Card>
            <Form layout='inline'>
                <Form.Item >
                    <Input placeholder="医院名称" />
                </Form.Item>
                <Form.Item >
                    <Input placeholder="医院编号" />
                </Form.Item>
                <Form.Item >
                    <Button type="primary" icon={<SearchOutlined />}>查询</Button>
                    <Button type="primary" danger className='ml'>清空</Button>
                </Form.Item>
            </Form>
            <Button type="primary">添加</Button>
            <Button type="primary" danger className='ml mt' disabled>批量删除</Button>

            <Table
                columns={columns}  //列
                dataSource={data}  //行 
                bordered  //带边框  默认值为true
                scroll={{ x: 1300 }}
                // Pagination = {{}}
            />
        </Card>
    );

}
